<template>
  <div>
    <Card class="warp-card" dis-hover>
      <vxe-grid ref="vGrid"
        resizable
        border
        show-overflow
        highlight-hover-row
        row-id="id"
        :loading="loading"
        :form-config="tableForm"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        pager-config
        :sort-config="sortConfig"
        :proxy-config="proxyConfig"
        @toolbar-button-click="buttonClick"
      >
      </vxe-grid>
    </Card>

    <SampleSendTableAdd ref="SampleSendTableAdd" @addSuccess="$refs.vGrid.commitProxy('reload')"></SampleSendTableAdd>
    <SampleSendTableTrack ref="SampleSendTableTrack"></SampleSendTableTrack>
  </div>
  
</template>

<script>
import { sampleSendApi } from '@/api/sample-send';
import SampleSendTableAdd from './components/sample-send-table-add'
import SampleSendTableTrack from './components/sample-send-table-track'
export default {
  name: 'SampleSendList',
  components: {
    SampleSendTableAdd,
    SampleSendTableTrack
  },
  props: {},
  data() {
    return {
      loading: false,
      // 按钮权限设置
      buttonsPrivles: {
        
      },
      // column
      tableColumn: [
        {
          type:'seq',
          width: '50'
        },
        {
          title: '客户',
          field: 'customerId',
          formatter: this.formatterCustomer
        },
        {
          title: '产品',
          field: 'productList',
          width: '180',
          slots: {
            default: ({ row, column }, h) => {
              if (row.productList != null && row.productList.length) {
                let renderList = [];
                row.productList.forEach(element => {
                  renderList.push(
                    h('div', {
                        style: {
                          color: 'blue'
                        }
                    }, element.productSpecification + '*' + element.productNum)
                  );
                });
                return renderList;
              }
            }
          }
        },
        {
          title: '价格',
          field: 'price'
        },
        {
          title: '是否含税',
          field: 'taxInclude',
          formatter: this.formatterTax
        },
        {
          title: '收件人',
          field: 'consignee'
        },
        {
          title: '手机号',
          field: 'mobilePhone'
        },
        {
          title: '座机号',
          field: 'telephone'
        },
        {
          title: '送样日期',
          field: 'sendDate'
        },
        {
          title: '创建日期',
          field: 'createTime'
        },
        {
          title: '操作',
          field: 'action',
          width: 160,
          align: 'center',
          className: 'action-hide',
          slots: {
            default: ({row}, h) => {
              return this.$tableAction(h, [
                {
                  title: '详情',
                  action: () => {
                    this.getDetail(row);
                  }
                },
                {
                  title: '跟踪',
                  directives: [
                    {
                      name: 'privilege',
                      value: 'sample-send-update'
                    }
                  ],
                  action: () => {
                    this.editEvent(row);
                  }
                },
                {
                  title: '删除',
                  directives: [
                    {
                      name: 'privilege',
                      value: 'sample-send-delete'
                    }
                  ],
                  action: () => {
                    this.deleteEvent(row);
                  }
                }
              ]);
            }
          }
        }
      ],
      // search form
      tableForm: {
        titleWidth: 100,
        titleAlign: 'right',
        data: {
          searchCount: true
        },
        items: [
          // { field: 'name', title: '产品名称', span: 6, titlePrefix: { message: '', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
          // { field: 'specification', title: '规格', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入简称' } } },
          // { field: 'spcNo', title: '规格书编号', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入座机号' } } },
          // { field: 'tags', title: '标签', span: 6, folding: false, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入助记码' } } },
          // { span: 24, align: 'center', collapseNode: false, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
        ]
      },
      // 按钮
      tableToolbar: {
        id: 'sample-send-list-button',
        refresh: true,
        export: true,
        custom: true,
        buttons: [
          { code: 'insert_code', name: '新增', icon: 'fa fa-plus', visible: true }
        ]
      },
      //sortConfig
      sortConfig: {
        remote: true,
        trigger: 'cell'
      },
      //proxyConfig
      proxyConfig: {
        seq: true,
        sort: true,
        form: true,
        props: {
          result: 'data.list',
          total: 'data.total'
        },
        ajax: {
          query: this.findList
        }
      }
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  methods: {
    // 获取数据列表
    findList({ page, sort, form }) {
      // 处理排序条件
      let queryParams = Object.assign({
        pageNum: page.currentPage,
        pageSize: page.pageSize
      }, form);
      if (sort.field !== undefined) {
        queryParams = Object.assign({
          sort: sort.order === 'asc',
          orderByField: sort.field
        }, queryParams);
      }
      return sampleSendApi.getList(queryParams);
    },
    // 新增
    insertEvent() {
      this.$refs['SampleSendTableAdd'].showModal();
    },
    editEvent(row) {
      this.$refs['SampleSendTableTrack'].showModal(row.id);
    },
    formatterCustomer({ cellValue }) {
      const item = this.$refs.SampleSendTableAdd.customerList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    formatterTax({ cellValue }) {
      return cellValue == 1 ? '是' : '否';
    },
    // 删除确定
    async deleteSure(delId) {
      this.loading = true;
      let res = await sampleSendApi.delete(delId);
      this.$Message.success('删除成功');
      this.loading = false;
      this.$refs.vGrid.commitProxy('reload');
      // this.findList();
    },
    // 删除操作
    deleteEvent(row) {
      this.$Modal.confirm({
        title: '友情提醒',
        content: '确定要删除吗？',
        onOk: () => {
          this.deleteSure(row.id);
        }
      });
    },
    // 详情
    async getDetail(row) {
      this.$refs['SampleSendTableAdd'].showModal(row, true);
    },
    buttonClick({code}, event) {
      switch (code) {
        case 'insert_code': 
          this.insertEvent();
      }
    },
    exportMethod ({ options }) {
      const proxyInfo = this.$refs.xGrid.getProxyInfo()
      const body = {
        filename: options.filename,
        sheetName: options.sheetName,
        isHeader: options.isHeader,
        original: options.original,
        mode: options.mode,
        pager: proxyInfo.pager,
        ids: options.mode === 'selected' ? options.data.map(item => item.id) : [],
        fields: options.columns.map(column => {
          return {
            field: column.property,
            title: column.title
          }
        })
      }
      // 开始服务端导出
      return XEAjax.post('https://api.xuliangzhan.com:10443/api/user/export', body).then(data => {
        if (data.id) {
          this.$XModal.message({ message: '导出成功，开始下载', status: 'success' })
          // 读取路径，开始下载
          location.href = `https://api.xuliangzhan.com:10443/api/download/${data.id}`
        }
      }).catch(() => {
        this.$XModal.message({ message: '导出失败！', status: 'error' })
      })
    }
  }
};
</script>
